<%@include file="head.jsp" %>
<%@include file="nav.jsp" %>

<script language="JavaScript" src="js/scriptsDePrueba.js"></script>
	
	
<% 
	if (request.getAttribute("msg") != null ){	
%>	
	<div class="msg">
		<%=request.getAttribute("msg")%>
	</div>
<%
	} //if
%>
<div id="javascript">
<h1>Ejemplos de JavaScript</h1>


	<div class="example">
			<h2 class="example">Ejemplo basico:</h2>
			<div class="example_code notranslate">
				function ejemplo1(){	
					alert("Hello Word");
				}
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo();" value="Ejemplo Basico" />
	 </div>

<div class="example">
			<h2 class="example">Funcion1: getElementById()</h2>
			<div>
 				<span id="status">Hola mundo...</span>
			</div>
			<div class="example_code notranslate">
				function ejemplo1(){
					var el = document.getElementById("status");
					alert(el.innerHTML);
				}
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo1();" value="Ejemplo 1" />
	 </div>

<div class="example">
			<h2 class="example">Funcion 2: getElementsByTagName()</h2>
			<a href="/">Home</a>
 			<div id="links"> 
				<a href="http://google.com">Google</a> 
 				<a href="http://ubuntu.com">Ubuntu</a> 
				<a href="http://debian.org">Debian</a>
				</div>
			<div class="example_code notranslate">
				// Obtenemos el elemento con id â€œlinksâ€� var 
				 el = document.getElementById("links"); 
				 // Ahora obtenemos todos los elementos con tag A que hay 
				 // dentro del elemento 'el' var 
				 as = el.getElementsByTagName("a"); 
				 // Y finalmente recorremos el array de elementos para 
				 // cambiarles el color a cada uno 
				 for (var i=0; i < as.length; i++) { <br/> 
				 	as[i].style.color = '#AAA'; // negro 
				 } 
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo2();" value="Ejemplo 2" />
	 </div>


<div class="example">
			<h2 class="example">Funcion3: join()</h2>
			<div class="example_code notranslate">
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo3();" value="Ejemplo 3" />
	 </div>

<div class="example">
			<h2 class="example">Funcion4: split()</h2>
			<div class="example_code notranslate">
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo4();" value="Ejemplo 4" />
	 </div>

<div class="example">
			<h2 class="example">Funcion5: addEventListener() / attachEvent()</h2>
			<div id="frases">
 				<div>Hola mundo!</div>
 				<div>Foo bar</div>
 				<div>Lorem Ipsum</div>
			</div>
			<div class="example_code notranslate">
				function nuevo_evento(elemento, evento, funcion) {
				if (elemento.addEventListener) {
						elemento.addEventListener(evento, funcion, false);
				} else {
						elemento.attachEvent("on"+evento, funcion);
				}
		 };
		 
		 function sacarAlert(){
			 alert(this.innerHTML);
		 }
		 function ejemplo5 (){	
				// Obtenemos los elementos DIV a los que queremos aÃ±adir nuestro evento onclick
				 var divs = document.getElementById("frases").getElementsByTagName("div");
				 // Recorremos todos los divs
				 for (var i=0; i < divs.length; i++) {
					 // AÃ±adimos el evento onclick al div
					 nuevo_evento(divs[i], "click", sacarAlert);
						 // Hacemos que muestre el contenido del DIV
						 //alert(divs[i].innerHTML);
			
		 };
	};
			</div>
			<br>
			<input  type="button"class="tryitbtn" onClick="ejemplo5();" value="Ejemplo 5" />
	 </div>

<div class="example">
			<h2 class="example">Funcion6: focus()</h2>
			
			<form><a id="formulario"></a>
				 <label for="nombre" style="display:none;">  Nombre: </label>
				 <input type="text" id="nombre" value="Javier" />
				 <input type="text" id="apellidos" value="Perez" />
				</form>
				<a href="#formulario" onclick="document.getElementById('nombre').focus()"> Ir Nombre</a>
				<a href="#formulario" onclick="document.getElementById('apellidos').focus()">Ir Apellidos</a>
			
			<div class="example_code notranslate">
			</div>
			<br>
	 </div>

<h2>Funcion7: createElement() / appendChild()</h2>
<h2>Funcion8: removeChild()</h2>
<h2>Funcion9: setTimeout() / setInterval()</h2>
<h2>Funcion10: alert() / confirm() / prompt()</h2>
</div>
	
	


<%@include file="footer.jsp" %>